<template>
	<view>
		<view class="list">
			<view class="item" v-for="i in record" :key="i.id" @click="$goto('/pages/mall/order?no='+i.trade_no)">
				<image :src="i.goods_pic" class="img" mode="aspectFill"></image>
				<view class="info">
					<view class="flex-row justify-between align-center">
						<view class="lg">兑换成功</view>
						<view class="text-primary">{{i.status_text}}</view>
					</view>
					<view class="u-line-2">{{i.goods_name}} {{i.sku}}</view>
					
					<view class="u-line-1">{{i.delivery_name}}:{{i.delivery_code}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				record: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$u.get('/mall/order/record').then(res => {
					this.record = res.data.result.record
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		margin: 0 auto;
		margin-top: 24rpx;
		width: 670rpx;
		height: 202rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		
		&:nth-of-type(1) {
			margin-bottom: 24rpx;
		}

		.img {
			width: 220rpx;
			height: 162rpx;
			border-radius: 8rpx;
			object-fit: cover;
		}
		
		.info {
			font-size: 24rpx;
			width: 380rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 40rpx;
			
			.lg {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
			}
		}
	}
</style>
